***************************************
*          @@  FLEX 3 @@              *                  
*                                     *
*   ------ >> Chapitre 8 << ------    *
*                                     *
***************************************





<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<!-- Conteneur : VBox !-->
	<mx:VBox x="20" y="27" height="70" width="289">

	    <!-- Composant : Button !-->
	    <mx:Button id="btn" label="Button"/>
	
	</mx:VBox>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<!-- Conteneur : VBox !-->
	<mx:VBox x="20" y="27" height="70" width="289">

	    <!-- Composant : Button !-->
	    <mx:Button id="btn" label="Button" width="223" height="35"/>
	
	</mx:VBox>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<!-- Conteneur : VBox !-->
	<mx:VBox x="20" y="27" height="70" width="289">

	    <!-- Composant : Button !-->
	    <mx:Button id="btn" label="Button" width="50%" height="80%"/>
	
	</mx:VBox>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox x="20" y="27" height="70" width="289" borderStyle="inset">

	    <!-- Composant : Button !-->
	    <mx:Button id="btn" label="Button"  percentHeight="80" percentWidth="50"/>

	</mx:VBox>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<!-- CENTRE !-->
	<mx:Label x="10" y="17" text="Centre" width="250"/>
	<mx:HBox x="10" y="43" width="250" height="74" horizontalAlign="center">
	    <mx:Button id="btn1" label="Button"/>
	</mx:HBox>
	
	<!-- DROITE !-->
	<mx:Label x="10" y="129" text="Droite" width="250"/>
	<mx:HBox x="10" y="153" width="250" height="74" horizontalAlign="right">
	    <mx:Button id="btn2" label="Button"/>
	</mx:HBox>
	
	<!-- GAUCHE !-->
	<mx:Label x="10" y="247" text="Gauche" width="250"/>
	<mx:HBox x="10" y="271" width="250" height="74" horizontalAlign="left">
	    <mx:Button id="btn3" label="Button"/>
	</mx:HBox>
	
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<!-- MILIEU !-->
	<mx:Label x="10" y="17" text="Milieu" width="250"/>
	<mx:HBox x="10" y="43" width="250" height="74" verticalAlign="middle">
	    <mx:Button id="btn1" label="Button"/>
	</mx:HBox>
	
	<!-- HAUT !-->
	<mx:Label x="10" y="129" text="Haut" width="250"/>
	<mx:HBox x="10" y="153" width="250" height="74" verticalAlign="top">
	    <mx:Button id="btn2" label="Button"/>
	</mx:HBox>
	
	<!-- BAS !-->
	<mx:Label x="10" y="247" text="Bas" width="250"/>
	<mx:HBox x="10" y="271" width="250" height="74" verticalAlign="bottom">
	    <mx:Button id="btn3" label="Button"/>
	</mx:HBox>
	
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<!-- Positionnement de type "absolute" !-->
	<mx:Panel title="Absolute" x="31" y="10" width="250" height="120" layout="absolute" >
	    <mx:Button id="btn" x="10" y="10" label="Button"/>
	    <mx:Button id="btn2" x="133" y="37" label="Button"/>
	</mx:Panel>
	
	<!-- Positionnement de type "vertical" !-->
	<mx:Panel title="Vertical" x="31" y="138" width="250" height="120" layout="vertical" >
	    <mx:Button id="btn3" label="Button"/>
	    <mx:Button id="btn4" label="Button"/>
	</mx:Panel>
	
	<!-- Positionnement de type "horizontal" !-->
	<mx:Panel title="Horizontal" x="31" y="266" width="250" height="120" layout="horizontal" >
	    <mx:Button id="btn5" label="Button"/>
	    <mx:Button id="btn6" label="Button"/>
	</mx:Panel>
	
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:HBox x="10" y="10" width="250" height="158"
	    paddingLeft="50"
	    paddingTop="20"
	    >
	
	    <mx:Button id="btn" label="Button"/>
	</mx:HBox>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Panel width="250" layout="absolute"
	    horizontalCenter="0"
	    top="175"
	    bottom="275">
	</mx:Panel>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Panel id="pan" x="10" y="10" width="250" height="86" layout="absolute"
	    horizontalScrollPolicy="off"
	    verticalScrollPolicy="off">
	
	    <mx:Button id="btn" x="0" y="14" label="Button" width="240"/>
	
	</mx:Panel>
	
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style>
	    .classePersonnalisee{
	        fontSize: 10;
	        color:red;
	    }
	
	    Button {
	        fontSize: 20;
	    }
	</mx:Style>
	
	<mx:Button id="btn" x="10" y="10" label="Button"/>
	
	<mx:Label id="lab" x="10" y="53" text="Label" styleName="classePersonnalisee"/>
	
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style source="feuilleDeStyle.css"></mx:Style>
	
	<mx:Button id="btn" x="10" y="10" label="Button"/>
	
	<mx:Label id="lab" x="10" y="53" text="Label" styleName="classePersonnalisee"/>
	
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="appliquerStyle()" >

<mx:Script>
	    <![CDATA[
	
	        // Importation de la classe StyleManager
	        import mx.styles.StyleManager;
	
	        // Dfinition du style
	        private var styleActionScript:CSSStyleDeclaration;
	
	        private function appliquerStyle():void{
	
	        // Instanciation de la classe CSSStyleDeclaration;
	        styleActionScript = new	CSSStyleDeclaration('styleActionScript');
	
	        // Cration des proprits
	        styleActionScript.setStyle('fontSize',20);
	
	        // Affectation des proprits  la classe Label
	        StyleManager.setStyleDeclaration("Label",styleActionScript,true);
	        }
	
	    ]]>
</mx:Script>
	
	<mx:Label id="lab" x="10" y="10" text="tiquette"/>
		
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Style>
		Button {
	    downSkin: Embed('monImage.jpg');
	}
	</mx:Style>

<mx:Button id="btn" x="50" y="42" label="Button"/>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Button id="btn" x="50" y="42" label="Button"
	       downSkin="@Embed(source='monImage.jpg')"/>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Style>
		Button {
	    downSkin: Embed('monSWF.swf');
	}
	</mx:Style>

<mx:Button id="btn" x="50" y="42" label="Button"/>

</mx:Application>
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Button id="btn" x="50" y="42" label="Button"
	    downSkin="Embed(source='monSWF.swf')"/>

</mx:Application>
Package com.test.skin
{
	
	import mx.skins.RectangularBorder;

	public class SkinPersonnalise extends RectangularBorder
	{
	
	    // Constructeur
	    public function SkinPersonnalise(){}
	
	    // Redfinition de la mthode updateDisplayList
	    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
	
	        // Rcupration de la taille du skin composant
	        super.updateDisplayList(unscaledWidth, unscaledHeight);
	
	        // Nettoyage de la forme
	        graphics.clear();
	
	        // Dessin de la bordure
	        	drawRoundRect(0,0,unscaledWidth,unscaledHeight,{tl:50,tr:10,bl:10,br:30},0xCCCC99,0.8);
	
	    }

	}
}
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
		
	<mx:VBox id="vb" x="29" y="20" height="173" width="259"
	    borderSkin="com.test.skin.SkinPersonnalise" >
	</mx:VBox>

</mx:Application>
